<template>
	<view class="search-page">
	  <view class="search-box">
		<input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @confirm="handleSearch" />
		<button @click="handleSearch">搜索</button>
	  </view>


	  <view class="search-history" v-if="searchHistory.length > 0">
		<view class="section-title">搜索历史</view>
		<view class="history-list">
		  <view class="history-item" v-for="(item, index) in searchHistory" :key="index" @click="selectSearchHistory(item)">
			{{ item }}
			<view class="delete-icon" @click.stop="removeSearchHistory(item,index)">
			  <text class="icon-close">删除</text>
			</view>
		  </view>
		</view>
	  </view>
	</view>

  </template>

  <script setup>
  import { ref,onMounted } from 'vue';
  import { 
	adminAddSearch,
	adminGetSearch,
	adminDeleteSearch
 } from '@/request/api.js'
  const searchQuery = ref('');
  const searchHistory = ref([]);


  const handleSearch = () => {
	if (searchQuery.value.trim() !== '') {
	  if (!searchHistory.value.includes(searchQuery.value)) {
		searchHistory.value.unshift(searchQuery.value);
			adminAddSearch({
				page:"日志管理",
				token:uni.getStorageSync('adminToken'),
				content:searchQuery.value
			}).then()
	  }
	  console.log(searchQuery.value)
	  uni.redirectTo({
        url: '/pages/admin/mgr/log/admin_mgr_log?search='+searchQuery.value
        });
	  searchQuery.value = '';
	}
  };
  onMounted(() => {
	adminGetSearch({
    token:uni.getStorageSync('adminToken'),
	page:"日志管理"
  }).then((res) => {
    console.log(res)
	res.data.data.forEach((item) => {
        if (!searchHistory.value.includes(item.content)) {
          searchHistory.value.unshift(item.content);
        }
      });
  });
});
  const selectSearchHistory = (item) => {
	console.log(item)
	uni.redirectTo({
		url: '/pages/admin/mgr/log/admin_mgr_log?search='+item
		});
  };

  const removeSearchHistory = (item,index) => {
	adminDeleteSearch({
    token:uni.getStorageSync('adminToken'),
	page:"日志管理",
	content:item}).then();
	searchHistory.value.splice(index, 1);
  };
  </script>

  <style scoped>
  .search-page {
	padding: 20px;
	background-color: #f5f5f5;
	min-height: 100vh
  }


  .search-box {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 10px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
  }

  .search-box input {
	flex-grow: 1;
	padding: 10px;
	border: none;
	border-radius: 20px;
	font-size: 16px;
  }

  .search-box button {
	margin-left: 10px;
	padding: 10px 20px;
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s;
  }

  .search-box button:hover {
	background-color: #0056b3;
  }

  .section-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
  }

  .history-list {
	background-color: #fff;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .history-item {
	padding: 10px 15px;
	border-radius: 10px;
	margin-bottom: 5px;
	background-color: #ebebeb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background-color 0.3s;
  }

  .history-item:hover {
	background-color: #d9d9d9;
  }

  .delete-icon {
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #888;
	font-size: 18px;
  }

  .icon-close {
	margin-left: 10px;
  }
  </style>